<template>
  <div>
    <!-- 添加节点信息 -->
    <h3>工作流</h3>
    <div class="mt-4 mb-4">
      <el-button type="primary" @click="addNodes">新增流程</el-button>
    </div>
    <div style="width:100%;height: 100%;" id="container"></div>
    <wsDialog :digVisible="digVisible" @close="close" :detailObject="detailObject" :graph="graph"></wsDialog>
  </div>
</template>
<script setup lang="ts">
/* vue3中定义 */
import { onMounted, ref } from 'vue';
import { Graph } from '@antv/g6';
import wsDialog from '@/components/wangs/ws-dialog.vue';
let graph = null

/* 初始化 */
const init = () => {
  graph = new Graph({
    container: document.getElementById('container'),
    width: window.innerWidth,
    height: window.innerHeight,
    data: {
      nodes: [
        /* 起码要留出一个顶点 */
        {
          id: 'node-1',
          style: {
            x: 50, y: 100,
            cursor:'pointer',
            data: {
              flowName: 'node-1',
              id: 'node-1',
              do: '这是流程1......(描述)'
            }
          },
        },
        // {
        //   id: 'node-2',
        //   style: { x: 150, y: 100 },
        // },
      ],
      // edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
    },
  });
  graph.render();
}

/* 查看详情并删除 */
const digVisible = ref(false)
const detailObject = ref({})
const lookNode = () => {
  /* 鼠标点击查看详情 */
  graph.on('node:click', (e: any) => {
    /* 打开弹窗 */
    digVisible.value = true
    detailObject.value = Object.assign(e.target.style['data'])
  })
}
onMounted(() => {
  init()
  lookNode()
});


/* 新增 */
const ind = ref(1)
const addNodes = () => {
  ind.value += 1
  /* 添加节点 */
  graph.addNodeData([
    {
      id: `node-${ind.value}`,
      style: {
        x: 50 + (ind.value - 1) * 100, y: 100,
        cursor:'pointer',
        /* 可以自定义把数据绑定在style里 */
        data: {
          flowName: `node-${ind.value}`,
          id: `node-${ind.value}`,
          do: `这是流程${ind.value}...(描述)`
        }
      },

    },
  ]);
  /* 添加边 */
  graph.addEdgeData([
    {
      source: `node-${ind.value - 1}`,
      target: `node-${ind.value}`,
      data: {
        label: '连接到新节点',
        weight: 2,
      },
    },
  ]);
  graph.render();
}


const close = (e: any) => {
  ind.value = e['index']
  digVisible.value = e['status']
}










</script>
<style scoped></style>